import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import { useState, useEffect } from 'react';
import '../style/Pgs.css';

// 引入图标
import { PoweroffOutlined } from '@ant-design/icons';


// 引入弹出框
import { Modal } from 'antd';


function Pgs() {
  const [activeMenu, setActiveMenu] = useState('');
  const location = useLocation();

  // 监听路由变化，更新当前激活的菜单
  useEffect(() => {
    const path = location.pathname;
    if (path.includes('tub')) {
      setActiveMenu('tub');
    } else if (path.includes('/pgs')) {
      setActiveMenu('/pgs')
    }
  }, [location]);

  // 退出首页
  const navigate = useNavigate();
  const tui = () => {
    setIsModalOpen(true);
  }


  // 退出首页弹出框
  const [isModalOpen, setIsModalOpen] = useState(false);


  const handleOk = () => {
    setIsModalOpen(false);
    navigate('/home');
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };




  return (
    <div className="admin-container">
      {/* 左侧导航菜单 */}
      <div className="sidebar">
        <div className="sidebar-header">
          <h2>订单管理系统</h2>
        </div>
        <nav className="menu">
          <ul>
            <li>
              <Link
                to="/pgs"
                className={`menu-item ${activeMenu === '/pgs' ? 'active' : ''}`}
              >
                <span className="menu-icon">📋</span>
                <span className="menu-text">订单列表</span>
              </Link>
            </li>
            <li>
              <Link
                to="/pgs/tub"
                className={`menu-item ${activeMenu === 'tub' ? 'active' : ''}`}
              >
                <span className="menu-icon">📊</span>
                <span className="menu-text">数据统计</span>
              </Link>
            </li>
            <li className="menu-divider"></li>
          </ul>
        </nav>
      </div>

      {/* 右侧内容区域 */}
      <div className="content">
        <div className="content-header">
          <h1>
            {activeMenu === 'ding' ? '订单列表' :
              activeMenu === 'tub' ? '数据统计' : '订单管理'}
          </h1>
          <PoweroffOutlined className="Pgs_q1" onClick={() => tui()} />
          <Modal
            title="尊敬的用户您好"
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            okText="确定" // 指定确认按钮文字为 "OK"
            cancelText="取消" // 指定取消按钮文字为 "Cancel"
          >
            <p>您确定要退出首页吗</p>
          </Modal>
        </div>
        <div className="content-body">
          <Outlet />
        </div>
      </div>
    </div>
  );
}

export default Pgs;